<template>
  <div id="bai-du-map">
    <!-- 技术支持和联系方式  -->
  </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
// 设置安全密钥
window._AMapSecurityConfig = {
  securityJsCode: 'c13d86fb0861727f303d5aaae5228c51',
}
export default {
  emits:['jieshou'],
  data() {
    return {
      map: null,
      mouseTool: null,
      overlays: [],
      auto: null,
      placeSearch: null,
      marker: "",
      // 位置信息
      form: {
        lng: "",
        lat: ""
      },
    }
  },
  methods: {
    initMap() {
      AMapLoader.load({
        "key": "27af72a582e60d64a7cbc7ff38fd1f76",
        "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        "plugins": ["AMap.Scale", "AMap.ToolBar", "AMap.ControlBar", "AMap.MouseTool", "AMap.MapType", "AMap.HawkEye"],           // 需要使用的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        this.map = new AMap.Map('bai-du-map', {
          viewMode: "3D",  //  是否为3D地图模式
          zoom: 13,   // 初始化地图级别
          center: [116.3119343, 39.36127144], //中心点坐标  郑州
          resizeEnable: true
        });
        this.map.on("click", (e) => {
          // 获取经纬度
          this.form.lng = e.lnglat.lng;
          this.form.lat = e.lnglat.lat;
          this.$emit('jieshou',{form:this.form})
          // 清除点
          this.removeMarker();
          // 标记点
          this.setMapMarker();
        });

        this.map.addControl(new AMap.Scale());   // 添加左下角的比例尺
        let toolBar = new AMap.ToolBar({
          position: {
            bottom: '190px',
            left: '20px'
          }
        });
        let controlBar = new AMap.ControlBar({
          position: {
            bottom: '80px',
            left: '10px',
          },
        });
        this.map.addControl(toolBar);   // 添加右下角的放大缩小
        this.map.addControl(controlBar);   // 方向盘
        this.map.addControl(new AMap.MapType());   // 添加右上角的标准图和卫星图  和路况
        this.map.addControl(new AMap.HawkEye());   // 添加地图放大镜
      }).catch(e => {
        console.log(e);
      });
    },
    setMapMarker() {
      // 自动适应显示想显示的范围区域
      this.map.setFitView();
      this.marker = new AMap.Marker({
        map: this.map,
        position: [this.form.lng, this.form.lat],
      });
      this.map.setFitView();
      this.map.add(this.marker);
    },
    // 清除点
    removeMarker() {
      if (this.marker) {
        this.map.remove(this.marker);
      }
    }
  },
  mounted() {
    this.initMap();
  },
}
</script>

<style lang="scss" scoped>
#bai-du-map {
  overflow: hidden;
  width: 860px;
  height: 260px;
  margin: 0;
  font-family: "微软雅黑";
}
</style>